<template>
  <div class="map-legend is-always-shadow">
    <el-select
      v-model="value"
      placeholder="请选择"
      size="small"
      style="width: 100%"
    >
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.id"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <div class="legend-list">
      <div class="legend-item" v-for="layer of timeLineLayers" :key="layer.id">
        <div
          class="legend-color"
          :style="{ background: layer.paint['fill-extrusion-color'] }"
        ></div>
        <div class="legend-text">{{ layer.id }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: window.BULIDING_LAYERS_LIST,
      value: window.BULIDING_LAYERS_LIST[0].id,
    }
  },
  props: {
    timeLineLayers: {
      type: Array,
      default() {
        return []
      },
    },
  },
  watch: {
    value(newVal, oldVal) {
      const style = this.options.find((i) => i.id === newVal)
      this.$emit('changeStyle', style, oldVal)
    },
  },
}
</script>

<style lang="scss" scoped>
.map-legend {
  position: absolute;
  right: 15px;
  bottom: 10px;
  min-width: 100px;
  max-width: 200px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  .legend-item {
    display: flex;
    align-items: center;
    .legend-color {
      width: 12px;
      height: 12px;
      margin-right: 10px;
    }
  }
}
</style>
